<template>
  <scroll-view 
    class="scroll-container" 
    scroll-y 
    :show-scrollbar="false"
  >
    <!-- 顶部标题区 -->
    <view class="title-section">
      <text class="main-title">昆明</text>
      <text class="sub-title">KUNMING</text>
      <view class="divider"></view>
    </view>

    <!-- 加载状态 -->
    <view class="loading-section" v-if="loading">
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 错误提示 -->
    <view class="error-section" v-if="error">
      <text class="error-text">{{ error }}</text>
    </view>

    <!-- 照片展示区 -->
    <view class="gallery-section" v-if="!loading && !error">
      <!-- 大图展示区 -->
      <view class="featured-image" v-if="galleryList.length > 0" @click="previewImage(0)">
        <image 
          :src="galleryList[0].image" 
          mode="aspectFill" 
          @error="handleImageError"
          class="main-image"
        />
        <view class="featured-info">
          <text class="featured-title">{{ galleryList[0].title }}</text>
          <text class="featured-title-en">{{ galleryList[0].titleEn }}</text>
        </view>
      </view>

      <!-- 照片网格区 -->
      <view class="gallery-grid" v-if="galleryList.length > 1">
        <view
          v-for="(item, index) in galleryList.slice(1)"
          :key="item.id"
          :class="getItemClass(index)"
          @click="previewImage(index + 1)"
        >
          <image :src="item.image" mode="aspectFill" @error="handleImageError" />
          <view class="item-info">
            <text class="item-title">{{ item.title }}</text>
            <text class="item-title-en">{{ item.titleEn }}</text>
          </view>
        </view>
      </view>

      <!-- 无数据提示 -->
      <view class="empty-section" v-if="galleryList.length === 0">
        <text class="empty-text">暂无图片数据</text>
      </view>
    </view>
    <van-back-top  bottom="20vh" />
  </scroll-view>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import request from '@/utils/request';
import { showImagePreview } from 'vant';

const galleryList = ref([]);
const loading = ref(true);
const error = ref('');

// 计算类名
const getItemClass = (index) => {
  return {
    'gallery-item': true,
    'vertical': index % 3 === 0
  };
};

// 预览图片
const previewImage = (index) => {
  const urls = galleryList.value.map(item => item.image)
  showImagePreview({
    images: urls,
    swipeDuration: 50,
    closeable: true,
    loop: true,
    startPosition: index,
  });
};

// 处理图片加载错误
const handleImageError = (e) => {
  console.error('Image load error:', e);
  if (e.target) {
    e.target.src = 'https://img01.yzcdn.cn/vant/apple-1.jpg';
  }
};

// 获取昆明的图片
const fetchKunmingImages = async () => {
  loading.value = true;
  error.value = '';
  
  try {
    const response = await request({
      url: '/api/profilepic/GetProfilesAsync?_type=201',
      method: 'get'
    });

    if (response.status && response.data) {
      const descriptions = [
        "Stone Forest - Nature's Stone Garden",
        "Dianchi Lake - The Pearl of Yunnan",
        "Western Hills - Dragon Gate View",
        "Green Lake Park - City's Green Heart",
        "Yuantong Temple - Ancient Buddhist Sanctuary",
        "Kunming's Spring - Eternal Spring City",
        "Flower Market - Colorful Paradise",
        "Ancient Tea Horse Road - Historical Path",
        "Kunming's Night - City of Lights",
        "Yunnan Ethnic Village - Cultural Mosaic"
      ];

      const images = response.data.map((item, index) => {
        let imageUrl = item.picUrl;
        if (imageUrl && !imageUrl.startsWith('http')) {
          imageUrl = `http://${imageUrl}`;
        }
        
        return {
          id: `kunming-${item.id || index}`,
          image: imageUrl,
          title: "❤昆明",
          titleEn: descriptions[index % descriptions.length]
        };
      });

      galleryList.value = images;
    } else {
      error.value = '未获取到图片数据';
    }
  } catch (err) {
    console.error('Failed to fetch Kunming images:', err);
    error.value = '获取图片失败，请稍后重试';
    uni.showToast({
      title: '获取图片失败',
      icon: 'error'
    });
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  fetchKunmingImages();
});
</script>

<style lang="scss" scoped>
.scroll-container {
  height: 100vh;
  width: 100%;
  padding: 0 24px;
  box-sizing: border-box;
  background-color: #f5f5f5;
}

.title-section {
  padding:  5px 0 30px;
  text-align: center;
  
  .main-title {
    font-size: 48px;
    font-weight: bold;
    color: #333333;
    display: block;
    margin-bottom: 10px;
    letter-spacing: 8px;
    font-family: 'STKaiti', '楷体', serif;
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
      width: 40%;
      height: 2px;
      background: linear-gradient(to right, transparent, #333333, transparent);
    }
  }
  
  .sub-title {
    font-size: 18px;
    color: #666666;
    display: block;
    margin-bottom: 16px;
    letter-spacing: 2px;
  }
  
  .divider {
    width: 50px;
    height: 2px;
    background: linear-gradient(to right, transparent, #333333, transparent);
    margin: 0 auto;
  }
}

.loading-section {
  padding: 40px 0;
  text-align: center;
  
  .loading-text {
    font-size: 16px;
    color: #666666;
  }
}

.error-section {
  padding: 40px 0;
  text-align: center;
  
  .error-text {
    font-size: 16px;
    color: #ff4d4f;
  }
}

.empty-section {
  padding: 40px 0;
  text-align: center;
  
  .empty-text {
    font-size: 16px;
    color: #999999;
  }
}

.gallery-section {
  padding-bottom: 100px;
  
  .featured-image {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 177.78%; // 16:9 的逆比例，适应竖版图片
    margin-bottom: 16px;
    border-radius: 8px;
    overflow: hidden;
    
    .main-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .featured-info {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 20px;
      background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
      
      .featured-title {
        font-size: 24px;
        color: #ffffff;
        display: block;
        margin-bottom: 8px;
      }
      
      .featured-title-en {
        font-size: 14px;
        color: rgba(255,255,255,0.9);
        display: block;
        font-style: italic;
      }
    }
  }
  
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    
    .gallery-item {
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      height: 0;
      padding-bottom: 177.78%; /* 9:16 aspect ratio */
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

      image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
      .item-info {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 12px;
        background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
        
        .item-title {
          font-size: 16px;
          color: #ffffff;
          display: block;
          margin-bottom: 4px;
        }
        
        .item-title-en {
          font-size: 12px;
          color: rgba(255,255,255,0.9);
          display: block;
          font-style: italic;
        }
      }
    }
  }
}
</style> 